<!-- 主井提升 -->
<template>
  <div class="main gif">
    <div class="model">
      <div class="bg">
        <img src="../assets/images/duringup.png">
      </div>
      <!-- 旗帜 -->
      <div class="goods">
        <img src="../assets/images/mianup.gif">
      </div>
      <!-- 盒子 -->
      <div class="demo">
        <!-- 罐笼 -->
        <div class="guanlong" :style="guan">
          <img src="../assets/images/guanlong.jpg" ref="imgLeft">
        </div>
        <!-- 箕斗 -->
        <div class="jidou" :style="jidou">
          <img src="../assets/images/jidou.jpg" ref="imgRight">
        </div>
      </div>
    </div>
    <div class="table">
      <main-table :tableList="tableList"></main-table>
    </div>
  </div>
</template>

<script>
  import MainTable from '@/components/MainTable'
  // 接口默认后端传百分比
  import {
    vshaftList
  } from '../server/api.js'
  export default {
    data() {
      return {
        guan: {
          top: ''
        },
        jidou: {
          top: ''
        },
        timer: null,
        tableList: []
      }
    },
    mounted() {
      this.init();
      this.setTimer();
    },
    destroyed: function () {
      clearInterval(this.timer)
    },
    methods: {
      setTimer() {
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.init()
          }, 5000)
        }
      },
      async init() {
        const res = await vshaftList()
        this.tableList = res.data.data
        console.log(this.tableList)
        // mock随机数据
        setInterval(() => {
          this.guan.top = Math.floor(Math.random() * 100) - 7.4;
          if (this.guan.top < 7.4) {
            this.guan.top = 0 + '%'
          } else(
            this.guan.top += '%'
          )
        }, 5000);
        setInterval(() => {
          this.jidou.top = Math.floor(Math.random() * 100) - 10.5;
          if (this.jidou.top < 10.5) {
            this.jidou.top = 0 + '%'
          } else(
            this.jidou.top += '%'
          )
        }, 5000);
      }
    },
    watch: {
      'guan.top': {
        handler: function () {}
      },
      deep: true
    },
    components: {
      MainTable
    }
  }

</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 50% 50%;

    .bg {
      position: relative;
      top: 0px;
      left: 0px;
      width: 100%;
      display: block;
    }

    .goods {
      position: absolute;
      top: 132px;
      left: 314px;
    }

    .demo {
      width: 100px;
      height: 370px;
      position: absolute;
      top: 700px;
      left: 300px;

      .guanlong {
        position: absolute;
        top: 0px;
        left: 20px;

        img {
          height: 50px;
        }
      }

      .jidou {
        position: absolute;
        top: 0px;
        left: 114px;
      }
    }

    .table {
      align-self: center;
    }
  }

</style>
